<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../index/index.css">
    <link rel="stylesheet" href="search.css">
</head>
<body>
    <div id="top">
        <div class="top-top1">
        <div class="top-top">
            <div class="top-left">
                <a href="javascript:;" class="come">欢迎来到丝芙兰</a>
                <a href="#" class="i one">请登录</a>
                <a href="#" class="one">免费注册</a>
                <a href="#" class="one">手机验证码登录</a>
            </div>
            <div class="top-center top-center-text">
                <div class="top-scroll">
                <ul>
                    <li><a href="#" class="one">丝芙兰防诈骗公告</a></li>
                    <li><a href="#" class="one">丝芙兰配送公告</a></li>
                    <li><a href="#" class="one">丝芙兰正品承诺</a></li>
                    <li><a href="#" class="one">常见问题</a></li>
                </ul>
                </div>
            </div>
            <div class="top-right">
                <span class="toprights">
                    <span class="top-right-tu">
                    </span>
                    <a href="#" class="one top-right-one">我的丝芙兰</a>
                    <span class="top-right-tu2 top-angle"></span>
                    <ul class="top-right-mylist top-angle">
                        <li><a href="#" class="one">我的订单</a></li>
                    </ul>
                </span>
                <span>
                    <span class="top-right-tu3"></span>
                    <a href="#" class="one">会员俱乐部</a>
                </span>
                <span class="toprighttf">
                    <span class="top-right-tu4"></span>
                    <a href="#" class="one">手机丝芙兰 <img src="https://ssl1.sephorastatic.cn/soa/pc/images/downQR2.png" alt="" class="top-right-img"></a>
                </span>
                <span>
                    <a href="#" class="one">帮助中心</a>
                </span> 
            </div>
        </div>
    </div>
    </div>
    <!-- 搜索框====================================================== -->
    <div id="search">
        <div class="search-all">
            <div class="search-left">
                <a href="#"><img src="https://ssl1.sephorastatic.cn/soa/pc/images/sep_top_Logo.png" alt=""></a>
            </div>
            <div class="search-center">
                <div class="search-top">
                    <div class="search-input">
                        <input type="text" placeholder="小众好物品OMG种草">
                    </div>
                    <div class="search-button">搜索</div>
                </div>
                <ul class="search-list">
                    <a href="#" class="one">会员私享75折起</a>
                    <a href="#" class="one">私家划算好物</a>
                    <a href="#" class="one">经典囤货力荐</a>
                    <a href="#" class="one">炎日基础护肤</a>
                    <a href="#" class="one">人气彩香合辑</a>
                    <a href="#" class="one">小众尖货精选</a>
                </ul>
            </div>
            <div class="search-right">
                <div class="search-main">
                    <a href="#" class="search-a">
                        <em class="shopping-bag"></em>
                        购物袋
                        <span class="shopping-num">0</span>
                        件
                    </a>
                </div>
    
                <div class="search-cart">
                    <div class="search-active">
                        <em></em>
                        <span>购物车内暂时没有商品，登陆后将显示您之前加入的商品</span>
                        <a href="#">
                            <div>登录</div>
                        </a>
                    </div>
                </div>
            </div>
            <a href="javascript:void(0);" class="search-bottom">
                <img src="https://ssl1.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2018/06/banner/navigation_shopping.png" alt="">
            </a>
        </div>
    </div>
    <!-- 导航====================================================== -->
    <div id="nav" >
        <div class="nav-all nav2">
            <div class="nav-left">
                <a href="javascript:;">全部商品类目</a>
                <div class="nav-list">
                    <em class="nav-sxin xiaoxin"></em>
                    <ul class="nav-ul search-ul">
                        <li>
                            <span class="ok">
                                <div class="ok-cont">
                                    <div class="gx">
                                     <div class="gx-top">
                                            <em>保湿</em>
                                     </div>
                                     <div class="gx-center">
                                        <ul>
                                            <h3>保湿</h3>
                                            <li>
                                                <a href="#">舒缓</a>
                                                <a href="#">保湿补水</a>
                                            </li>
                                            <h3>清洁</h3>
                                            <li>
                                                <a href="#">去角质</a>
                                                <a href="#">卸妆清洁</a>
                                            </li>
                                        </ul>
                                        <ul>
                                            <h3>美白</h3>
                                            <li>
                                                <a href="#">淡斑</a>
                                                <a href="#">提亮肤色</a>
                                                <a href="#">淡化黑眼圈</a>
                                            </li>
                                            <h3>底妆修容</h3>
                                            <li>
                                                <a href="#">提亮肤色</a>
                                                <a href="#">遮瑕</a>
                                                <a href="#">隔离</a>
                                            </li>
                                            <h3>抗老</h3>
                                            <li>
                                                <a href="#">抗污染</a>
                                                <a href="#">抗皱</a>
                                                <a href="#">抗氧化</a>
                                            </li>
                                            <h3>紧致</h3>
                                            <li>
                                                <a href="#">淡化细纹</a>
                                                <a href="#">提拉紧致</a>
                                            </li>
                                        </ul>
                                        <ul>
                                            <h3>防晒</h3>
                                            <li>
                                                <a href="#">防晒</a>
                                                <a href="#">晒后修复</a>
                                            </li>
                                            <h3>控油</h3>
                                            <li>
                                                <a href="#">细致毛孔</a>
                                                <a href="#">祛痘</a>
                                            </li>
                                            <h3>百变妆容</h3>
                                            <li>
                                                <a href="#">炫色金属</a>
                                                <a href="#">魅惑哑光</a>
                                                <a href="#">亮泽水光</a>
                                                <a href="#">清新自然</a>
                                            </li>
                                        </ul>
                                     </div>
                                     <div class="gx-bottom">
                                         <img src="https://ssl1.sephorastatic.cn/wcsfrontend/brand/lancome/lancome_144X60.png" alt="">
                                         <img src="https://ssl2.sephorastatic.cn/wcsfrontend/brand/esteelauder/esteelauder_144X60.png" alt="">
                                         <img src="https://ssl3.sephorastatic.cn/wcsfrontend/brand/mariedalgarcolorstudio/mariedalgarcolorstudio_144X60.png" alt="">
                                         <img src="https://ssl4.sephorastatic.cn/wcsfrontend/brand/fresh/fresh_144X60.png" alt="">
                                     </div>
                                    </div>
                                    <a href="#">
                                    <img src="https://ssl2.sephorastatic.cn/wcsfrontend/campaign/campaign_img/2018/11/banner/hp_tiffany_20181102.jpg" alt="">
                                   </a>
                                </div>
                            </span>
                            <a href="javascript:;">功效</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">保湿补水</a></li>
                                <li class="last"><a href="#" class="one">底妆修容</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span class="ok"></span> -->
                            <a href="javascript:;">护肤</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">打造"天鹅颈"</a></li>
                                <li class="last"><a href="#" class="one">Yes成分</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">彩妆</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">秋日彩妆盘点</a></li>
                                <li class="last"><a href="#" class="one">彩妆惠选礼盒</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">香水</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">秋日馨香盘点</a></li>
                                <li class="last"><a href="#" class="one">小众香氛</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">工具</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">美容仪加持美力</a></li>
                                <li class="last"><a href="#" class="one">美妆蛋套装</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">男士</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">男士赠礼</a></li>
                                <li class="last"><a href="#" class="one">水油平衡</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">洗浴护体</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">洗护沐浴</a></li>
                                <li class="last"><a href="#" class="one">塑身纤体</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">美发护发</a>
                            <ul class="nav-listul">
                                <li><a href="#" class="one">换季防脱</a></li>
                                <li class="last"><a href="#" class="one">润养秀发防毛躁</a></li>
                            </ul>
                        </li>
                        <li>
                            <!-- <span></span> -->
                            <a href="javascript:;">肤食</a>
                            <ul class="nav-listul">
                                <li class="last"><a href="#" class="one">胶原蛋白饮品</a></li>
                            </ul>
                        </li>
                    </ul>
                    <em class="nav-dxin daxin"></em>
                </div>
            </div>
            <div class="nav-center">
                <ul class="nav-center-list">
                    <li>
                        <a href="#" class="one">畅销榜单</a>
                    </li>
                    <li>
                        <a href="#" class="one">独家发售</a>
                    </li>
                    <li>
                        <a href="#" class="one">礼物套装</a>
                    </li>
                    <li>
                        <a href="#" class="one">全部品牌</a>
                    </li>
                    <li>
                        <a href="#" class="one">预约中心</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- ======================== -->
    <div id="porductall">
        <div class="searchall">
            <ul class="seach-ul">
                <li class="searchli">
                    <a href="#" class="one">首页</a>
                </li>
                <li class="searchli2">></li>
                <li class="searchli3">搜索结果</li>
                <li class="searchli4">共94件商品</li>
            </ul>
        </div>
        <div class="filter_cont">
            <div class="filter_conton">
                <div class="pintop">
                    <div class="pintitle">品牌</div>
                    <div class="pinall">
                        <div class="searchm">
                            <input type="text" placeholder="搜索品牌名称">
                        </div>
                        <ul class="pinallul">
                            <li class="pinli">
                                <img src="https://ssl2.sephorastatic.cn/wcsfrontend/brand/sephoracollection/sephoracollection_144X60.png" alt="">
                                <a href="#" class="cover">SEPHORACOLLECTION</a>
                            </li>
                            <li class="pinli">
                                <img src="https://ssl2.sephorastatic.cn/wcsfrontend/brand/sephoracollection/sephoracollection_144X60.png" alt="">
                                <a href="#" class="cover">SEPHORACOLLECTION</a>
                            </li>
                        </ul>
                    </div>
                    <div class="pinbtn">
                        <div class="ssbtn">
                            <a href="javascript:;" class="selectmore">
                                多选
                            </a>
                            <a href="javascript:;" class="showmore">
                                更多
                            </a>
                        </div>
                    </div>
                </div>
            </div>
            <ul class="layoutul">
                <li class="filter_item">
                    <div class="filter_title">分类</div>
                    <ul class="filter_if">
                        <li class="if_li">
                            <a href="#"> <i>护肤</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>彩妆</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>香水</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>工具</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>男士</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>美发护发</i></a>
                        </li>
                        <div class="pinbtn">
                            <div class="ssbtn">
                                <a href="javascript:;" class="selectmore">
                                    多选
                                </a>
                            </div>
                        </div>
                    </ul>
                </li>
                <li class="filter_item">
                    <div class="filter_title">适用人群</div>
                    <ul class="filter_if">
                        <li class="if_li">
                            <a href="#"> <i>女士</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>通用</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>男士</i></a>
                        </li>
                        <div class="pinbtn">
                            <div class="ssbtn">
                                <a href="javascript:;" class="selectmore">
                                    多选
                                </a>
                            </div>
                        </div>
                    </ul>
                </li>
                <li class="filter_item">
                    <div class="filter_title">适用部位</div>
                    <ul class="filter_if">
                        <li class="if_li">
                            <a href="#"> <i>面部</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>眼部</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>身体</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>头发</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>颈部</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>唇部</i></a>
                        </li>
                        <div class="pinbtn">
                            <div class="ssbtn">
                                <a href="javascript:;" class="selectmore">
                                    多选
                                </a>
                            </div>
                        </div>
                    </ul>
                </li>
                <li class="filter_item">
                    <div class="filter_title">功效</div>
                    <ul class="filter_if">
                        <li class="if_li">
                            <a href="#"> <i>淡化细纹</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>保湿补水</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>提拉紧致</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>改善眼部肌肤</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>提亮肤色</i></a>
                        </li>
                        <li class="if_li">
                            <a href="#"> <i>抗皱</i></a>
                        </li>
                        <div class="pinbtn">
                            <div class="ssbtn">
                                <a href="javascript:;" class="selectmore">
                                    多选
                                </a>
                                <a href="javascript:;" class="showmore">
                                    更多
                                </a>
                            </div>
                        </div>
                    </ul>
                </li>
            </ul>
            <div class="layoutop">
                <div class="sortleft">
                    <span class="sortw " id="bg">
                        <span>综合</span>
                        <i class="shorti" id="changeb"></i>
                        <span class="shortb " ></span>
                    </span>
                    <span class="sortw sortbg">
                        <span>销量</span>
                        <i class="shorti"></i>
                        <span class="shortb"></span>
                    </span>
                    <span class="sortw sortbg">
                        <span>新品</span>
                        <i class="shorti"></i>
                        <span class="shortb"></span>
                    </span>
                    <span class="sortw sortbg">
                        <span>人气</span>
                        <i class="shorti"></i>
                        <span class="shortb"></span>
                    </span>
                    <span class="sortw sortbg">
                        <span>价格</span>
                        <i class="shorti"></i>
                        <span class="shortb"></span>
                    </span>
                </div>
                <div class="shorright">
                    <span class="flips">1</span>
                    <span>/</span>
                    <span>4</span>
                    <span class="flipl"></span>
                    <span class="flipr"></span>
                </div>
            </div>
            <div class="cate_prod_cont">
                <ul class="cate_prod">
                    <li class="listli">
                        <div class="p_cont">
                            <div class="p_img">
                                <a href="#">
                                    <img src="https://ssl2.sephorastatic.cn/products/5/4/0/5/6/7/1_n_10821_350x350.jpg" alt="">
                                </a>
                                <div class="pbuy">立即购买</div>
                            </div>
                            <div class="p_tags"></div>
                            <div class="p_brandEn">LANCOME</div>
                            <div class="p_productCn">
                                <a href="">兰蔻菁纯臻颜焕亮眼霜</a>
                            </div>
                            <div class="p-price">￥1080</div>
                        </div>
                    </li>

                </ul>
                <div class="cart-cart">
                    <a href="../cart/cart.html">去结算</a>
                </div>
            </div>
            <div id="footer">
                <div class="footer-info">
                    <div class="footer-info-ico">
                        <em class="footer-info-ico-em"></em>
                        <span class="footer-cont-span">顺丰EMS速达</span>
                    </div>
                    <span class="footer-ico-split"></span>
                    <div class="footer-info-ico ">
                        <em class="footer-info-ico-em back1"></em>
                        <span class="footer-cont-span">丰富礼赠</span>
                    </div>
                    <span class="footer-ico-split"></span>
                    <div class="footer-info-ico ">
                        <em class="footer-info-ico-em back2"></em>
                        <span class="footer-cont-span">100%官方正品</span>
                    </div>
                    <span class="footer-ico-split"></span>
                    <div class="footer-info-ico ">
                        <em class="footer-info-ico-em back3"></em>
                        <span class="footer-cont-span">无障碍退款</span>
                    </div>
                    <span class="footer-ico-split"></span>
                    <div class="footer-info-ico ">
                        <em class="footer-info-ico-em back4"></em>
                        <span class="footer-cont-span">安全支付</span>
                    </div>
                </div>
                <ul class="footer-map">
                    <li>
                        <a href="javascript:;" class="header">
                            <span>购物流程</span>
                        </a>
                        <a href="#">
                            <span>大宗采购/团购</span>
                        </a>
                        <a href="#">
                            <span>丝芙兰预付卡章程</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="header">
                            <span>支付/配送</span>
                        </a>
                        <a href="#">
                            <span>在线支付</span>
                        </a>
                        <a href="#">
                            <span>配送时间</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="header">
                            <span>售后服务</span>
                        </a>
                        <a href="#">
                            <span>退换货规定</span>
                        </a>
                        <a href="#">
                            <span>退换及退款说明</span>
                        </a>
                    </li>
                    <li>
                        <a href="javascript:;" class="header">
                            <span>关于丝芙兰</span>
                        </a>
                        <a href="#">
                            <span>公司介绍</span>
                        </a>
                        <a href="#">
                            <span>联系我们</span>
                        </a>
                        <a href="#">
                            <span>品牌合作 / Brand Collaboration</span>
                        </a>
                        <a href="#">
                            <span>隐私政策</span>
                        </a>
                    </li>
                    <li class="footer-hotline">
                        <a href="javascript:;" class="hd">
                            <span>网上订购咨询热线 : 400 670 0055</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <div class="footer-bottom">
        <div class="footer-bottom-cont">
            <ul class="bottom-center">
                <li class="bottom-id">
                    <a href="#" class="bottom-records">沪公网安备 31010602003121号</a>
                    <a href="#">ICP备案序号:沪ICP备05026645号</a>
                    <a href="#">食品经营许可证</a>
                    <a href="#">网站使用条款</a>
                    <a href="#">严正声明</a>
                </li>
                <li class="bottom-info">
                    <a href="#" class="bottom-text">本网站隶属于丝芙兰（上海）化妆品销售有限公司 (企业法人营业执照)</a>
                    <a href="#" class="bottom-text">预付卡信息对接唯一标识 : 310101F5201530100309</a>
                </li>
            </ul>
        </div>
    </div>
</body>
<script src="../libs/ajax.2.0.js"></script>
<script src="./search.js"></script>
<script src="../modules-list/list.js"></script>
<script src="../libs/require.js" data-main="../js/listMain"></script>
<script src="../libs/jquery.2.2.4.js"></script>
</html>